<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>物品展示</title>
  <style type="text/css">
    li {
      list-style-type: none;
      /* 去掉li前的点 */
      float: left;
      /*将li设置成做浮动，变为联动*/
    }

    a {
      display: block;
      /*将a变成块状*/
      width: 30vw;
      /*设置块的宽度*/
      height: 50px;
      /*设置块的长度*/
      font-family: Microsoft Yahei;
      line-height: 50px;
      /*设置字体在块中的高度*/
      background-color: #66B3FF;
      margin: 0px 0px;
      /*块里的高宽通过margin设置*/
      color: #fff;
      text-align: center;
      /*字体居中*/
      text-decoration: none;
      /*去掉下划线*/
      font-size: 15px;
      border: 5px;
      border-radius: 2px;
      border-color: black;
    }

    a:hover {
      background-color: #84C1FF;
    }

    .search {
      width: 60vw;
      border-color: cornflowerblue;
      margin-left: 150px;
      margin-top: 40px;
      height: 5vh;
      border-radius: 5px;
    }

    .bot1 {
      margin-top: 15px;
      margin-left: 45px;
      width: 10vw;
      height: 5vh;
      background-color: aquamarine;
      color: honeydew;
      border-radius: 5px;
      border-color: powderblue;
      font-family: Arial, Helvetica, sans-serif;
      font-size: large;
      opacity: 1;
    }

    .kind {
      margin-left: 6vw;
      margin-top: 20px;
      display: flex;
    }

    .smallKind {
      display: block;
      /*将a变成块状*/
      width: 12vw;
      /*设置块的宽度*/
      height: 50px;
      /*设置块的长度*/
      font-family: Microsoft Yahei;
      line-height: 54px;
      /*设置字体在块中的高度*/
      background-color: #66B3FF;
      margin: 0px 0px;
      /*块里的高宽通过margin设置*/
      color: #fff;
      text-align: center;
      /*字体居中*/
      text-decoration: none;
      /*去掉下划线*/
      font-size: 15px;
      border-color: black;
    }

    .bigbox {
      padding: 20px;
      display: flex;
      border: 3px solid 	#D9FFFF;
      width: 80vw;
      border-radius: 5px;
      margin-bottom: 15px;
    }

    .label {
      height: 30vh;
      width: 90vw;
      background-color: white;
      opacity: 0.9;
      border-radius: 5px;
      margin-top: 10px;
      margin-left: 30px;
      margin-bottom: 20px;
      display: flex;
      padding: 10px;
    }

    .bigbigbox {
      margin-left: 7vw;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .info {
      line-height: 40px;
      font-weight: bold;
      font-size: medium;
      margin-left: 20px;
    }

    .name {
      font-size: xx-large;
      font-weight: bolder;
      margin-left: 40px;
    }

    .time {
      font-size: larger;
      font-weight: bold;
      margin-left: 40px;
    }

    .bot2 {
      width: 12vw;
      height: 5vh;
      background-color: aquamarine;
      color: honeydew;
      border-radius: 5px;
      border-color: powderblue;
      font-family: Arial, Helvetica, sans-serif;
      font-size: large;
      opacity: 1;
      justify-content: flex-end;
    }
  </style>
</head>

<body>


<div>
  <ul>
    <li><a href="" th:href="@{/market/index}" >物品展示</a></li>
    <li><a href="" th:href="@{/market/chat}">消息记录</a></li>
    <li><a href="" th:href="@{/market/my}">我的咸鱼</a></li>
  </ul>
</div>
<div></div>
<div>
  <form method="get" action="/market/product" th:href="@{/market/product(keyword)}">
    <input type="search" name="keyword" placeholder="搜索二手物品" class="search">
    <input type="submit" class="bot1">
  </form>
</div>
<div class="kind">
  <ul>
    <li style="margin-right: 10px; font-family: Microsoft Yahei;
			line-height: 54px;font-size: larger;font-weight: bolder;">可选类别：</li>
    <li><a href=""  th:href="@{/market/product(class_type=1)}" class="smallKind">衣服</a></li>
    <li><a href="" th:href="@{/market/product(class_type=2)}" class="smallKind">食品</a></li>
    <li><a href="" th:href="@{/market/product(class_type=3)}" class="smallKind">电子产品</a></li>
    <li><a href="" th:href="@{/market/product(class_type=4)}" class="smallKind">书籍</a></li>
    <li><a href="" th:href="@{/market/product(class_type=5)}" class="smallKind">化妆品</a></li>
    <li><a href="" th:href="@{/market/product(class_type=6)}" class="smallKind">其他</a></li>
  </ul>
</div>

<div class="bigbigbox">
  <div class="bigbox" th:each="product:${products}">
    <div class="label" id="label">
      <img style = "height: 30vh; width:15vw;" th:src="@{'http://127.0.0.1:8080/'+${product.picture}}">
      <div style="line-height: 50px; width: 45vw;" >
        <div class="name" ><b th:text="${product.productName}"></b></div>
        <div style="display: flex">
          <div class="time" >发布时间:</div>
          <div class="time" ><b th:text="${product.time}">发布时间</b></div>
        </div>
        <div style="display: flex">
          <div class="time">价格:</div>
          <div class="time" th:text="${product.price}">价格</div>
          <div class="time">元</div>
        </div>
        </div>
      <div style="text-align: right; font-size: large;">
        <a type="button" class="bot2" style="margin-right: 20px;" th:href="@{/market/product/info(product_id=${product.productId})}">查看详情</a>
        <div style="display: flex">
          <div style="margin-top:125px">点赞数：</div>
          <div style="margin-top:125px" th:text="${product.like}">点赞数：1000</div>
        </div>
        <div style="display: flex">
          <div style="margin-top:15px">评论数：</div>
          <div style="margin-top:15px" th:text="${product.commentNumber}">评论数：200</div>
        </div>
      </div>
    </div>
  </div>

</div>



</body>

</html>
